<include file="Public/mheader" />
<style>
body{
	overflow: hidden;
}
.background{
	width:100%;
	height:100%;
	background:url(__PUBLIC__/__MODULE__/img/index-none.jpg)  no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	overflow:hidden;
}
.bottom-div{
	position:fixed;
	bottom:40px;
	width:100%;
	text-align:center;
	margin:0;
}
.start,.loading{
	padding:10px;
	height:100%;
	width:100%;
	position: absolute;
	top:100%;
}
.start-page{
	width:100%;
	height:100%;
	background:#fff;
	text-align:center;
	font-size:16px;
	padding:50px;
	background: url(__PUBLIC__/__MODULE__/img/start_bg.png) no-repeat center center;
	background-size: 100% 100%;
}
.line_btm {
	border-bottom: 1px solid #aea797;
}
.answer{
	top:0;
	display:none;
	color: #fff;
	height:100%;
}

.game_top {
	height:90px;
	border-bottom: 1px solid #aa7749;
	background: url(__PUBLIC__/__MODULE__/img/game_bg_top.jpg) no-repeat;
	background-size: 1005 100%;
	position: relative;
}
.game_top_t {
	width: 42.6666666666666%;
	margin: 0px auto 0;
	position: relative;
	top:10px;
	height: 37px;
	background: url(__PUBLIC__/__MODULE__/img/title_bg.png) no-repeat;
	background-size: 100% 100%;
	text-align: center;
	color: #fbd768;
	font-size: 2.2rem;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
#pass_num{color: #b70000}
.pass_num {
	color: #b70000;
	background: rgba(121, 68, 27, 0.3);
	border-radius: 3px;
	width: 44px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin:14px 0 0 10px;
}
.pass_num>span {
	color: #29221d;
}
.socre_panel {
	position: absolute;
	bottom: -10px;
	left: 50%;
	margin-left: -30px;
	width: 60px;height: 50px;
	background: #79441b;
	text-align: center;
	z-index: 10;

}
#cur_score{width: 55px;height: 30px;background: #fff;margin:2px auto 0;color: #79441b;line-height: 30px;font-weight: 600;font-size: 2rem} 
.socre_panel .text{position: relative;line-height: 20px;}
.socre_panel .text:before,
.socre_panel .text:after{
	content: '';
	width: 3px;height: 3px;background: #79441b;
	display: block;position: absolute;top:7px;
}
.socre_panel .text:before{left: -3px;}
.socre_panel .text:after{right: -3px;}

.time_count_panel {
	width: 85px;
	height: 30px;
	line-height: 30px;
	background: rgba(121, 68, 27, 0.3);
	margin:14px 10px 0 0;
	border-radius: 3px;
	text-align: center;

}
.time_count_panel>span {
	padding: 0px 2px;
	height: 22px;
	line-height: 22px;
	margin-top: 4px;
	color: #fff;
	background: #000;
	border-radius: 4px;
	display: inline-block;
}
.time_count_panel>span:nth-child(3){
	background: none;
}
.ques_panel{width: 100%;background: url(__PUBLIC__/__MODULE__/img/game_bg_center.jpg) no-repeat;background-size: 100% 100%;position: relative;}
.ques_type01{padding-bottom: 6%;}
.ques_panel .flag{width: 25px;height: 40px;background: url(__PUBLIC__/__MODULE__/img/flag.png) no-repeat;background-size: 100% 100%;margin: 6% 2% 0 4%;}
.ques_type02{}
.ques_type02>img{display: block;width:100%;}
.ques_type02 .ques_text{
	position: absolute;bottom: 0;left: 0;margin:0;
	padding:4px 10px;
	text-align: center;
	color: #fff;
	width: 100%;background: rgba(0,0,0,0.7);
}
.ques_text{width: 82.93333333333333%;color: #3c3836;font-size: 1.8rem;line-height: 1.32;margin-top:6%;}


.answers_panel{margin:12.1875% auto 0;width: 280px;position: relative;}
.answers_item{width: 100%;height: auto;line-height: 35px;position: relative;margin-bottom: 6.25%;}
.answers_item>img{position: absolute;}
.as_normal_bg,
.as_active_bg{
	width: 100%;height: 100%;left: 0;top: 0;
}
.right_mark{width: 50px;height: 44px;right: -20px;top:-4px;}
.wrong_mark{width: 42px;height:44px;right: -20px;top:-4px; }
.as_text{width: 100%;/*height: 100%;*/height:auto;/*position: absolute;*/top:0;left: 0;font-size: 1.6rem;text-indent: 10px;background:url(__PUBLIC__/__MODULE__/img/anwser_bg.png);background-size:100% 100%;}


.clear:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden
}
.answer-page{
	background: url(__PUBLIC__/__MODULE__/img/game_bg_btm.jpg);background-size: 100% auto;
	height:100%;
}

.back{
	position: absolute;
	width:15%;
}
</style>
<div class="background">
	<div class="back">
		<a href="javascript:void(0)" data-href='{:U("index")}'><img src="__PUBLIC__/__MODULE__/img/back.png"></a>
	</div>
	<div class="start">
		<div class="start-page">
			<switch name="point" >
			<case value="1">
				<div><img src="__PUBLIC__/__MODULE__/img/pengze.png"></div>
				<div>{:C("POINT")[$point]}</div>
				<div style="text-align:left">
					<p class="line_btm">战争已经爆发，侵略者的身影已临城下，年轻的英雄出发吧，为捍卫领土而战，将血肉身躯化作民族的强盾，完成任务，荣誉勋章等你摘取！</p>
					<p>准备好了吗？</p>
				</div>
			
			</case>
			<case value="2">
				<div><img src="__PUBLIC__/__MODULE__/img/jiujiang.png"></div>
				<div>{:C("POINT")[$point]}</div>
				<div style="text-align:left">
					<p class="line_btm">战争已经爆发，侵略者的身影已临城下，年轻的英雄出发吧，为捍卫领土而战，将血肉身躯化作民族的强盾，完成任务，荣誉勋章等你摘取！</p>
					<p>准备好了吗？</p>
				</div>
			
			</case>
			<case value="3">
				<div><img src="__PUBLIC__/__MODULE__/img/xingzi.png"></div>
				<div>{:C("POINT")[$point]}</div>
				<div style="text-align:left">
					<p class="line_btm">战争已经爆发，侵略者的身影已临城下，年轻的英雄出发吧，为捍卫领土而战，将血肉身躯化作民族的强盾，完成任务，荣誉勋章等你摘取！</p>
					<p>准备好了吗？</p>
				</div>
			
			</case>
			<case value="4">
				<div><img src="__PUBLIC__/__MODULE__/img/dean.png"></div>
				<div>{:C("POINT")[$point]}</div>
				<div style="text-align:left">
					<p class="line_btm">战争已经爆发，侵略者的身影已临城下，年轻的英雄出发吧，为捍卫领土而战，将血肉身躯化作民族的强盾，完成任务，荣誉勋章等你摘取！</p>
					<p>准备好了吗？</p>
				</div>
			
			</case>
			</switch>
			
			<div id="start_btn" style="display:none;"><a class="btn btn-default" style="width:200px;height:50px;padding:0;background:url(http://mat1.gtimg.com/news/2015/1945/res/images/start_game.png)   no-repeat;background-size:100% 100%;" href='javascript:void(0)' role="button"></a></div>
		</div>
	</div>
	<div class="answer">
		<div class="answer-page">
			<div class="game_top">
				<p class="game_top_t">{:C("POINT")[$point]}任务</p>
				<div class="clear">
					<p class="pass_num fl"><span id="pass_num">1</span><span id="total_pass">/5</span></p>
					<!--div class="socre_panel">
						<p id="cur_score">0</p>
						<p class="text">得分</p>
					</div-->
					<p class="time_count_panel fr">
						<span id="time_min0">0</span>
						<span id="time_hour">3</span>
						<span>:</span>
						<span id="time_min">2</span>
						<span id="time_sec">5</span>
					</p>
				</div>
			</div>
			<div class="interactive_panel">
				<!-- 文字题目 -->
				<div class="ques_panel ques_type01 clear">
					<span class="flag fl"></span>
					<p class="fl ques_text"></p>
				</div>
				<!-- 图文题目 -->
				<div class="ques_panel ques_type02 clear hidden">
					<img class="ques_img" src="about:blank" alt="">
					<p class="fl ques_text"></p>
				</div>
				<!-- 答案 -->
				<div class="answers_panel">
					<div class="answers_item" style="opacity: 1;">
						<!--img class="as_normal_bg" src="__PUBLIC__/__MODULE__/img/anwser_bg.png" alt=""-->
						<p data-position="1" class="as_text">A.<span></span></p>
					</div>
					<div class="answers_item" style="opacity: 1;">
						<!--img class="as_normal_bg" src="__PUBLIC__/__MODULE__/img/anwser_bg.png" alt=""-->
						<p data-position="2" class="as_text">B.<span></span></p>
					</div>
					<div class="answers_item" style="opacity: 1;">
						<!--img class="as_normal_bg" src="__PUBLIC__/__MODULE__/img/anwser_bg.png" alt=""-->
						<p data-position="3" class="as_text">C.<span></span></p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="hidden">
	<form method="post" class="form-signin" action="">
		
	</form>
</div>
<div class='loading' style='display:none;top:0;z-index:999999;background:#000000;opacity: 0.5;'><div class='swiper-lazy-preloader swiper-lazy-preloader-white'></div></div>
<script>
$('a[data-href]').on('click',function(){
	location.href=$(this).data('href');
});
$(function(){
	var answer;
	var position = -1;
	var time = 0;
	var timer_start = false;
	//$("#total_pass").html("/"+answer.length);
	$(".start").animate({top:"0"},3000,function(){
		$('#start_btn').show().on('click','a.btn',function(){
			//$(".background").css('height','auto').css('overflow','auto').css('min-height','100%');
			$('.loading').show();
			$.get('?action=start',{},function(data){
				//console.log(data);
				answer = data;
				$("#total_pass").html("/"+answer.length);
				$('.loading').hide();
				$(".start").hide();
				$(".answers_item .as_text").on('click',function(){
					nextanswer(this);
				}).eq(0).click();
				$(".answer").show();
				//setInterval("timer()",1000);
				timer_start = true;
				timer();
			});//记录时间
		});
	});
	function timer(){
		//console.log(time);
		var s = time % 60;
		var min = (time-s) / 60;
		var s2 = s % 10;
		var s1 = s < 10 ? 0 : (s-s2)/10;
		var min2 = min % 10;
		var min1 = min < 10 ? 0 : (min-min2)/10;
		$("#time_min0").html(min1);
		$("#time_hour").html(min2);
		$("#time_min").html(s1);
		$("#time_sec").html(s2);
		time++;
		if(timer_start){
			setTimeout(timer, 1000);
		}
	}
	function nextanswer(o){
		if(position != -1){
			var p = $(o).data("position");
			$('form').append("<input type='hidden' name='p["+position+"]' value='"+p+"'>");
			//console.log(position+","+p);
		}
		position++;
		$("#pass_num").html(position+1);
		if(position>answer.length-1){
			//console.log('return');
			timer_start = false;
			//$('body').append("<div class='start' style='top:0;z-index:999999;background:#000000;opacity: 0.5;'><div class='swiper-lazy-preloader swiper-lazy-preloader-white'></div></div>");
			$('.loading').show();
			$('form').submit();
			return;
		}
		var a = answer[position];
		if(a.pic==''){
			$(".ques_type01 .ques_text").html(a.title);
			$(".ques_type01").removeClass("hidden");
			$(".ques_type02").addClass("hidden");
		}
		else{
			$(".ques_type02 .ques_text").html(a.title);
			$(".ques_type02 .ques_img").attr("src",a.pic);
			$(".ques_type01").addClass("hidden");
			$(".ques_type02").removeClass("hidden");
		}
		$(".answers_item .as_text span").each(function(i,o){
			$(o).html(a["answer"+(i+1)]);
		});
	}
});
</script>
<include file="public/footer" />